<template>
    <div class="Chat">
      <header>
        <span><router-link to="/Friends"><i></i>朋友</router-link></span>
        <span>快乐的哒</span>
        <span><i></i></span>
      </header>
      <main>
      <p>5月02日 22:09</p>
      <p><img src="../../static/img/chat_07.jpg" alt=""/><img src="../../static/img/chat_10.jpg" alt=""></p>
      <p><span>钱已入袋，</span><span>给对方回个话</span></p>
      <p>11:00</p>
      <p><img src="../../static/img/chat_15.jpg" alt=""><img src="../../static/img/chat_07.jpg" alt=""/></p>
      <p><span>默默转账? </span><span>给对方捎句话吧</span></p>
      </main>
      <footer>
        <img src="../../static/img/chat_22.jpg" alt="">
        <input type="text">
        <p>
          <img src="../../static/img/chat_25.jpg" alt="">
          <img src="../../static/img/chat_27.jpg" alt="">
        </p>
      </footer>
    </div>
</template>

<script>
    export default {
        name: "Chat"
    }
</script>

<style scoped>
  header{
    background: #0e80d8;
    padding: .8rem;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: .9rem;
  }
  header span:nth-child(1) a{
    color: #fff;
  }
  header span i{
    display: inline-block;
    width: 1.3rem;
    height: 2rem;
    vertical-align: middle;
  }
  header span:nth-child(1) i{
    background: url(../../static/img/back.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-right: .5rem;
    width: 0.6rem;
    height: 1rem;
  }
  header span:nth-child(2){
    font-size: 1.1rem;
    margin-right: 1.7rem;
  }
  header span:nth-child(3) i{
    width:1.2rem;
    height: 1.4rem;
    background: url(../../static/img/chat_03.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  main{
    padding-bottom: 10rem;
  }
  main p:first-child,main p:nth-child(4){
    font-size: .8rem;
    color: #a1a1a1;
    text-align: center;
    padding: .8rem 0;
  }
  main p:nth-child(2){
    display: flex;
  }
  main p:nth-child(5){
    display: flex;
    justify-content: flex-end;
  }
  main p:nth-child(2) img:first-child,
  main p:nth-child(5) img:last-child{
    width: 3rem;
    height: 3rem;
    margin: 0 .5rem;
  }
  main p:nth-child(2) img:last-child,
  main p:nth-child(5) img:first-child{
    height: 5.5rem;
  }
  main p:nth-child(3),main p:nth-child(6){
    width: 57%;
    padding: .4rem 0;
    background: gainsboro;
    border-radius: 0.3rem;
    text-align: center;
    font-size: .9rem;
    margin: 1.2rem auto;
  }
  main p:nth-child(3) span:first-child,
  main p:nth-child(6) span:first-child{
    color: white;
  }
  main p:nth-child(3) span:last-child,
  main p:nth-child(6) span:last-child{
    color:  #108ee9;
  }
  footer{
    padding: .6rem 0;
    border-top:1px solid #ddd ;
    display: flex;
    background: #F2F2F2;
    justify-content: space-between;
  }
  footer img{
    width: 2rem;
    height: 1.9rem;
    margin: 0 .3rem;
  }
  footer input{
    width: 60%;
    border: 1px solid #ddd;
    border-radius: .4rem;
  }
  footer p{
    display: flex;
    text-align: left;
  }
</style>
